<!-- CommodityInformation.vue -->
<template>
  <div class="container">
    <div class="flex-container">
      <el-upload class="upload"
        action="http://home.i3vsoft.com:1080/public-file-system/fs/file/upload"
        :headers="uploadHeaders"
        :data="loadFileParams"
        drag
        :on-success="handleSuccess"
        :on-remove="handleRemoveFile"
        list-type="picture-card"
        :limit="8"     
        :file-list="fileList"
        :auto-upload="true"
        :on-change="handleuploadChange"
        accept=".jpg,.png,.gif,.bmp,.rvmb,.wmv,.mp4"
        :class="{ dragging: isDragging }"
      >    
        <!-- :headers="headerObj"  -->
        <div slot="file" slot-scope="{file}"  @mouseover="showPreview(file.url, $event)" @mouseleave="hidePreview">
          <!-- <div class="image-container"> -->
          <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" 
            alt=""
          >  
          <span class="top-overlay" v-show="file.hovered">
            <div class="overlay-text" @click="SetAsCover(file, fileList)">设为封面</div>
          </span>
          <span class="bottom-overlay" v-show="file.hovered"   @click="handleRemove(file, fileList)"  >
            <!-- <i class="el-icon-delete" @click="handleRemoveFile(file)"></i> -->
            <img :src="require('@/assets/commodity/deleteimage.png')" alt="delete" class="deleteimg" />
          </span>
        </div> 
        <!-- </div> -->
        <template v-if="fileList.length === 0" >   
          <div  class="uploadarea" >
          <img :src="require('@/assets/commodity/uploadimage.png')" alt="Upload Image" class="upload-image" />
            <div class="el-upload__text"><em>拖拽图片到此区域也可上传,最多上传8张
            支持JPG,PNG,GIF,BMP,RMVB,WMV,MP4</em></div>
          </div>
        </template>

        <div class="Twobtn">
          <el-row class="LocalBtn">
            <el-button class="LocalUploadBtn" round @click="triggerUpload">本地上传</el-button>
          </el-row>
          <el-row>
            <el-button class="CloudUploadBtn" round>网盘上传</el-button>
          </el-row>
          <el-row>
            <template v-if="fileList.length > 0">
              <div class="image-count">{{ fileList.length }}/8</div>
            </template>
          </el-row>
        </div>
      </el-upload>
    <div v-if="dialogVisible"  class="preview-container" :style="previewStyles">
      <img class="bigimage" :src="dialogImageUrl" alt=""  >
    </div>
    </div>
    <!-- <el-container class="Manage-Container-two" > -->

    <div class="main-content">
      <el-form :model="ruleForms" :rules="rules" ref="ruleForms" label-width="100px" >
        <el-form-item label="商品名称" prop="commodityName" class="enlarge-label">
          <el-input v-model="ruleForms.commodityName" class="Commodiy-box" ></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="commodityType" class="enlarge-label">
          <!-- <el-select v-model="ruleForms.commodityType" placeholder="请选择商品" class="Commodiy-box2">
            <el-option v-for="item in commodityOptions" :key="item.id" :label="item.catName" :value="item.id"></el-option>
          </el-select> -->
          <el-cascader
            placeholder="搜索"
            v-model="ruleForms.commodityType" 
            :show-all-levels="false"
            :options="formattedOptions" 
            :props="{
              label: 'label', 
              value: 'value', 
              children: 'children'
            }"
            class="Commodiy-box2"
            filterable
            clearable
          ></el-cascader>
        </el-form-item>

        <el-form-item label="商品品牌:" prop="brand" class="enlarge-label">
          <div class="boxadd">
            <el-select v-model="ruleForms.brand" placeholder="请选择品牌" class="Commodiy-boxadd">
              <el-option v-for="item in brandList" :key="item.id" :label="item.brandName" :value="item.brandName"></el-option>
            </el-select>
            <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;"  @click="openBrandDialog()">
              <img src="@/assets/icons/open.png" alt="添加" style="width: 16px; height: 16px;">
            </el-button>
          </div>

          <!-- <div  v-show="showCommodiybox3" class="showCommodiybox3" @click="toggleCascader">
            <el-cascader
              v-model="selectedValue"
              :options="options"
              :props="cascaderProps"
              class="Commodiy-box3"
              popper-class="custom-cascader-popper"
              filterable
              @visible-change="handleVisibleChange"
              
              ref="cascader"
              :show-all-levels="false"
            ></el-cascader>
          </div>
          <div>
            <div class="custom-popover-content"  v-show="showCommodiyboxactive" @click="handleOutsideClick"> 
              <div class="popoverspace"><p  class="move-right">{{ findLabelFromValue(selectedValue) }}</p></div>
              <el-autocomplete
                v-model="searchQuery"
                :fetch-suggestions="querySearchAsync"
                placeholder="搜索"
                @select="handleSelect"
                class="SearchBrand"
              ></el-autocomplete>
              <el-cascader-panel
                v-model="selectedValue"
                :options="options"
                :props="cascaderPanelProps"
                @change="handleChangeofpanel"
                class="no-border-cascader-panel"
                :show-all-levels="false"
              ></el-cascader-panel>
            </div>
          </div> -->
        </el-form-item>
        <el-form-item label="商品货号:" prop="productSn" class="enlarge-label">
          <el-input v-model="ruleForms.productSn" class="Commodiy-box" value=""></el-input>
        </el-form-item>
        <el-form-item label="计量单位:" prop="commodityUnit" class="enlarge-label">
          <div class="boxadd">
            <el-select  v-model="ruleForms.commodityUnit" placeholder="请选择计量单位" class="Commodiy-boxadd">
              <el-option v-for="item in commodityUnit" :key="item.id" :label="item.unit" :value="item.unit"></el-option>
            </el-select >
            <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;"  @click="openUnitDialog()">
              <img src="@/assets/icons/open.png" alt="添加" style="width: 16px; height: 16px;">
            </el-button>
            <!-- <div
              @click="openUnitDialog()"
              style="margin-top: 10px;"
              >+
            </div> -->
          </div>
        </el-form-item>
        <el-form-item label="商品简介:" prop="commodityIntro" class="enlarge-label">
          <textarea   v-model="ruleForms.commodityIntro" class="jianjie"/>
        </el-form-item>
      </el-form>
    </div>
    <div>
      
      <el-dialog :visible.sync="unitDialog" title="输入内容":modal="false"width ="10%">
        <el-input v-model="tempUnit"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="unitDialog = false">取消</el-button>
          <el-button @click="handleAddUnit()">确定</el-button>
        </span>
      </el-dialog>
      <div>
      <BrandaddDialog
        v-if="visible1"
        @close="handleClose"
        :visible.sync="visible1"
      ></BrandaddDialog>
    </div>
    </div>
    <!-- </el-container> -->
  </div>
</template>

<script>
// import CommodityAttributes from './CommodityAttributes.vue';
// import CommodityDetail from './CommodityDetail.vue'
//  import { getProductManage } from '@/api/api.js'
// import Editor from '../../editor/editProduceIntroduction.vue'
import { getAllProducts,deleteProduct } from '@/api/api.js'
import { getCategoryListTree ,getCategoryList , getBrand , getCommodityunitList , addCommodityunit} from '@/api/api.js'
import BrandaddDialog from "../../../components/BrandaddDialog.vue";
import { mapState } from 'vuex';
var formData = new FormData() // 声明一个FormData对象
var formData = new window.FormData() // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'

  export default {
    name:'CommodityManage',
    components: {
      BrandaddDialog,
    // CommodityAttributes,
    // CommodityDetail,
    // Editor//测试用的编辑器
  },
   headerObj: {
      'X-SYSTEM': 'saas',
      'X-Access-Token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOjEsImV4cCI6MTcxOTQ5ODk4OCwicGxhdGZvcm0iOjIsInVzZXJuYW1lIjoiMTUwNzMxNzEzMjAifQ.VXSa76KjG4fxy_6wH-pEGVpl_8cGciYSN8atkueKV0s'
      // 其他自定义请求头字段
    },
    props:{
      // tilte:{
      //   type:String,
      //   default:"title",
      // },
        show:{
          type:Boolean,
          default:false,
        },
        width:String,
        marginTop:String,
        marginRight:String,
    },
     cascaderProps: {
        multiple: true
      },
    data() {
      return {
        uploadHeaders: {
          'X-SYSTEM': 'saas',
          'X-Access-Token': sessionStorage.getItem('XAccessToken'),
          'Sys-Access-Token': this.$store.state.SysAccessToken,
        },
        loadFileParams: {
          folderId: '40287e01907244650190729cf393002d',
          isCover: '0',
        },
        previewStyles: {
          top: '0px',
          left: '0px',
          display: 'none'
        },
        dialogImageUrl: '',
        showCommodiybox3:true,//级联选择器点击前
        showCommodiyboxactive:false,//级联选择器点击后
        dialogVisible: false,//悬停图片
        disabled: false,
        isDragging: false,
        selectedValue: [], // 你的选中的值
        selectedLabel:[],
        searchQuery: "",   // 搜索查询
        cascaderProps: {}, // 级联选择属性
        cascaderPanelProps: {}, // 级联面板属性
        showPopoverContent: false, // 显示弹出内容
        fileList: [], // 用于存储已上传的文件列表
        imageInfos:[], // 用于存储图片列表
        file:[],
        fileList_now: [], // 保存图片列表
        state: '',
        searchResults: [],
        activeName: 'first',
        showContent: true, // 控制内容的显示与隐藏
        // ruleForm: {
        //   commodityName: '',
        //   commodityType: [],
        //   brand: '',
        //   productSn: '',
        //   commodityUnit: '',
        //   commodityIntro: '',
        // },
        rules: {
          commodityName: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            { min: 2, message: '长度在 2 个字符以上', trigger: 'blur' }
          ],
          commodityType: [
            { required: true, message: '请选择商品分类', trigger: 'change' }
          ],
          brand: [
            { required: true, message: '请选择商品品牌', trigger: 'change' }
          ],
          productSn: [
            { message: '请输入商品货号', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          commodityUnit: [
            { message: '请选择计量单位', trigger: 'change'},
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符',trigger: 'change' }
          ],
          commodityIntro: [
            { required: true, message: '请填写商品简介', trigger: 'blur' }
          ],
        },
        // options: [
        //   {
        //     value: 'shoujishuma',
        //     label: '手机数码',
        //     children: [{
        //       value: 'huawei',
        //       label: '华为',
        //     }, 
        //     {
        //       value: 'pingguo',
        //       label: '苹果',
        //     }]
        //   }, 
        //   {
        //     value: 'fuzhuang',
        //     label: '服装',
        //     children: [{
        //       value: 'lianyiqun',
        //       label: '连衣裙',
            
        //     }, {
        //       value: 'form',
        //       label: '文化衫',
            
        //     }, {
        //       value: 'data',
        //       label: '短裤',
            
        //     }, ]
        //   },
        //   {
        //     value: 'jiayongdianqi',
        //     label: '家用电器',
        //     children: [{
        //       value: 'axure',
        //       label: 'Axure Components'
        //     }, {
        //       value: 'sketch',
        //       label: 'Sketch Templates'
        //     }, {
        //       value: 'jiaohu',
        //       label: '组件交互文档'
        //     }]
        //   }
        // ],
        commodityOptions: [],
        brandList: [],
        commodityUnit: [],
        categoryListTree: [],
        formattedOptions: [],
        unitDialog: false,
        tempUnit: '',
        visible1: false,
      };


    },
    computed: {
      // // 从 Vuex store 中获取数据
      // basicInfoData() {
      //   return this.$store.state.addCommodity.ruleForm;
      // },
      // 计算属性，根据当前激活的标签页返回对应的组件名称
      currentTabComponent() {
        switch (this.activeName) {
          case 'first':
              return 'CommodityManage';
          case 'second':
            return 'CommodityAttributes';
          default:
            return 'CommodityDetail'; // 或者一个默认组件
        }
      },
      showInitialContent() {
        return this.fileList.length === 0;
      },
      displaySelectedValue() {
        return this.selectedValue ? this.selectedValue.join(' / ') : 'None';
      },
      ...mapState({
        ruleForms: state => state.addCommodity.ruleForm
      }),
    },
    watch: {
      // // 监听 ruleForm 的变化，当数据改变时更新 Vuex store
      // ruleForm: {
      //   handler(newVal) {
      //     this.updateBasicInfoData(newVal);
      //   },
      //   deep: true, // 深度监听，以便检测对象内部的变化
      // },
      
      // state(newVal) {
      //   if (newVal === '') {
      //     // 清空搜索状态时，重置级联选择器,搜索功能没实现，不知道需要什么样子的搜索
      //     this.ruleForm.brand = null;
      //   }
      // },
      
    },
    created() {
      // 在组件创建时，从 Vuex store 中获取数据填充 ruleForm
      // this.ruleForm = this.basicInfoData;
      this.fetchCommodityOptions(); 
      this.fetchCommodityStructuretree();
      this.getCommodityBrand();
      this.fetchCommodityunitList();
    },
    methods: {
      async fetchCommodityOptions() {
        try {
          const response = await getCategoryList();
          // console.log("商品分类数据",response.data);
          this.commodityOptions = response.data.result;
        } catch (error) {
          console.error('获取商品选项数据时出错：', error);
        }
      },
      async fetchCommodityunitList() {
        try {
          const response = await getCommodityunitList();
          // console.log("商品单位列表",response.data);
          this.commodityUnit = response.data.result;
        } catch (error) {
          console.error('获取商品单位数据时出错：', error);
        }
      },
      async addCommodityunitList(unit) {
        try {
          const response = await addCommodityunit(unit);
          // console.log("添加商品单位",response.data);
          return response.data;
        } catch (error) {
          console.error('添加商品单位数据时出错：', error);
        }
      },
      async getCommodityBrand() {
        const status = 2
        try {
          const response = await getBrand(status);
          console.log("商品品牌",response.data);
          this.brandList = response.data.result.records;
        } catch (error) {
          console.error('获取商品选项数据时出错：', error);
        }
      },
      async fetchCommodityStructuretree() {
        try {
          const response = await getCategoryListTree();
          // console.log("商品分类结构树",response.data);
          this.categoryListTree = response.data.result;
          this.formattedOptions = this.formatData(this.categoryListTree); 
        } catch (error) {
          console.error('获取商品选项数据时出错：', error);
        }
      },
      formatData(data) {
        return data.map(item => ({
          label: item.catName, 
          value: item.id, 
          children: item.children && item.children.length > 0? this.formatData(item.children) : null 
        }));
      },
      updateBasicInfoData(data) {
        this.$store.dispatch('updateRuleFormData', data);
      },
      openUnitDialog(){
        this.unitDialog = true;
      },
      async handleAddUnit(){
        console.log("添加单位",this.tempUnit);
        const response = await this.addCommodityunitList(this.tempUnit);
        // console.log("添加单位返回值",response);
        if(response.code==200){
          this.unitDialog = false;
          this.tempUnit = '';
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        }else{
          console.log(response.message);
          this.$message.error('失败');
        }

      },
      openBrandDialog() {
        this.visible1 = true;
      },
      //关闭添加品牌弹窗
      handleClose() {
        this.$emit("close", false);
      },
      // 文件上传
  //   upLoadImg(fileListArr) {
  //      const fd = new FormData()
  //      this.fileList_now.forEach( (file) => {// 因为要上传多个文件，所以需要遍历
  //      fd.append('file', file.raw)
  //     })
  //     uploadImgFiles(fd).then((response) => { // 上传图片的接口
  //       this.returnFileNameList = response.data;
  //     })
  //   },

  //  saveProduct() {
  //   this.$refs['ruleForm'].validate((valid) => {
  //     if (valid) {
  //       axios.post('/shopping-mall-backend/sp/product/add', this.ruleForm)
  //         .then(response => {
  //           console.log('保存成功:', response.data);
  //         })
  //         .catch(error => {
  //           console.error('保存失败:', error);
  //           // 显示错误消息
  //         });
  //     } else {
  //       console.log('表单验证失败！');
  //       return false;
  //     }
  //   });
  // },

      toggleCascader() {
     this.showCommodiybox3=!this.showCommodiybox3;
     this.showCommodiyboxactive=!this.showCommodiyboxactive;
    },
   
updatePreviewPosition(event) {//动态显示放大图片
  const rect = event.target.getBoundingClientRect();
  const left = rect.right + 10; // 在原图片右侧10像素显示
  const top = rect.top + window.scrollY - 50; // 在原图片上方一定距离显示
  // 设置固定位置，不随屏幕大小改变 
  this.previewStyles.position = 'fixed';
  this.previewStyles.left = `calc(${left}px + 10px)`;
  this.previewStyles.top = `${top}px`;
  this.previewStyles.display = 'block';
},

    showPreview(url,event) {
      // console.log("url",dialogImageUrl);
      console.log("url2",url);
      this.dialogImageUrl = url;
      this.dialogVisible = true;
      // 鼠标悬停时更新文件的hovered状态
      // this.fileList.forEach((file) => {
      //   file.hovered = false;
      // });
      if (this.fileList && Array.isArray(this.fileList)) {
        this.fileList.forEach((file) => {
            file.hovered = false;
        });

        const file = this.fileList.find((file) => file.url === url);
        if (file) {
          file.hovered = true;
        }
        this.updatePreviewPosition(event);
      }
    },
    hidePreview() {
      this.dialogVisible = false;
      this.dialogImageUrl = '';
       // 鼠标离开时更新文件的hovered状态
      this.fileList.forEach((file) => {
        file.hovered = false;
      });
    },

       handleuploadChange(file, fileList) {
      this.fileList = fileList; // 更新 fileList
    },
       handleBeforeUpload(file) {
      this.fileList.push(file);
      return false; // Prevent automatic upload
    },
    handleSuccess(response, file, fileList) {
      console.log("上传成功", response, file, fileList);
      this.fileList = fileList;
      this.pictureList = fileList;
      let imageInfos = this.convertFileList(this.pictureList);
      this.$store.state.addCommodity.ruleForm.imageInfos = imageInfos;
      console.log('imageInfos', imageInfos);
    },
    convertFileList(pictureList) {
      return pictureList.map(item => {
        if (item.response && item.response.result) {
          return {
            "businessId": "",
            "delFlag": 0,
            "fileId": "",
            "id": item.response.result.id,
            "imageName": item.name,
            "imageUrl": item.response.result.path,
            "isDefault": true,
            "sortNo": 0
          };
        } else {
          console.error('无效的文件项:', item);
          return {
            "businessId": "",
            "delFlag": 0,
            "fileId": "",
            "id": "",
            "imageName": "",
            "imageUrl": "",
            "isDefault": true,
            "sortNo": 0
          };
        }
      });
    },
    SetAsCover(file, fileList) {
      console.log("设置封面",file, fileList);
      if (file.response && file.response.result) {
        this.$store.state.addCommodity.ruleForm.pic = file.response.result.path;
        this.$message({
          message: '成功设置封面',
          type: 'success'
        });
      }
    },
    handleRemoveFile(file, fileList) {
       console.log("111",file, fileList);
      this.fileList = fileList;
      console.log("删除图片了吗");
    },
    triggerUpload() {
      this.$refs.upload.$el.querySelector('input[type="file"]').click();
       this.upLoadImg(this.fileItem) // 调用文件上传方法
    },

        handleVisibleChange(visible) {//切换级联选择的函数
      if (visible) {
        this.showPopoverContent = true;
        this.$nextTick(() => {
          this.$refs.popover.updatePopper();
        });
      } else {
        this.showPopoverContent = false;
      }
       setTimeout(() => {
          const popper = document.querySelector('.el-cascader__dropdown');
          if (popper) {
            popper.style.display = 'none';
          }
        }, 0);
    },
    //     handlePopoverToggle() {
      
    // },
    //   handleVisibleChange() {
    //   //  在弹出自定义弹出框时关闭原生的弹出框
    //     setTimeout(() => {
    //       const popper = document.querySelector('.el-cascader__dropdown');
    //       if (popper) {
    //         popper.style.display = 'none';
    //       }
    //     }, 0);
    // },
    
// loadAll() {
//         return [
//                { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
//                { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
//                 { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
//               ];
//         },
 querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      },
 
      handleClick(tab, event) {
      console.log(tab, event);
    },
      hidden(){
            this.$emit("update:show",false);
      },
      closeicon(){
        this.hidden();
        this.$emit("closeicon");
      },
      cancel(){
        this.hidden();
        this.$emit("cancel");
      },
      confirm(){
        this.hidden();
        this.$emit("confirm");
        this.saveProduct();
      },
     
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
       handleRemove(file, fileList) {
        console.log(file, fileList);
        this.handleRemoveFile(file,fileList);
        const index = fileList.indexOf(file);
        if (index !== -1) {
          fileList.splice(index, 1);
        };
        // 如果是手动上传模式，可能需要手动触发上传
        // this.$refs.upload.submit();
        this.hidePreview();
        console.log("删除了图片");
      
      },
      handlePreview(file) {
        console.log(file);
      },
      handleOutsideClick(event) {
      const contentElement = this.$el.querySelector('.custom-popover-content');
      // 添加空值检查
      if (contentElement) {
        const clickedInsideBox = contentElement.contains(event.target);
        if (!clickedInsideBox) {
          this.showCommodityBoxActive = false;
        }
      }
     },
    handleChangeofpanel(value) {
      // 级联选择器选中值发生改变时触发
      console.log('Selected Value:', value);
      this.showCommodiyboxactive = false;
      this.showCommodiybox3 = true;
    },
    findLabelFromValue(selectedValue) {
        // 初始化为根级 options
        let options = this.options;
        let label = '';
        // 遍历每一级的选项值
        for (let i = 0; i < selectedValue.length; i++) {
          // 在当前级别的 options 中查找对应的选项
          let option = options.find(opt => opt.value === selectedValue[i]);
          // 如果找到了对应的选项
          if (option) {
            // 更新 options 为当前选项的 children（如果有的话）
            options = option.children || [];
            // 最后一级的 option 就是目标 label
            label = option.label;
          } else {
            // 如果在当前级别没找到，结束查找
            break;
          }
        }   
        return label;
      },
    },
    mounted() {
      // this.restaurants = this.loadAll(); 
 
    },


  }  


</script>



<style scoped>
.cover{
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-color: rgb(0,0,0,0.15);
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

  .content{
    flex: 1; /* 使内容区域填充剩余空间 */
    overflow-y: auto; /* 当内容超出时显示滚动条 */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 1) transparent;
    /* &::-webkit-scrollbar {
        width: 8px; 
    }
    &::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 1);
        border-radius: 4px;
    }
    &::-webkit-scrollbar-track {
        background: transparent;
    } */
  }
.center-title.title{
  display: flex;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 50px;
  max-height: calc(100vh - 10vh);
}

.daohanglan {
  display: flex;
  flex-direction: column;
}

.el-dialog{
    position: relative;
    left:8%;
    margin-top:20%;
  max-height: 667px; 
}



.el-tabs-daohang{
  background-color: white;
   flex: 1;  
  margin-top:25px;
  padding-left:20px;
}
.el-tabs-daohang>>>.el-tabs__nav-wrap::after {
  background-color: white ;
}

  .el-tabs-daohang>>>.el-tabs__item.is-active {
  color: black;
  font-weight: bold;
color: rgba(52, 69, 99, 1);
}
.el-tabs-daohang >>> .el-tabs__nav.is-top .el-tabs__active-bar {
  height: 3px;
  width: 87px;
  background-color: rgba(126, 114, 242, 1); 
}

.el-tabs-daohang>>> .el-tabs__item {
color: rgba(94,108,132,1);
  font-size: 16px;
}

.spacer {
  height: 20px;
}


  .container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

.Manage-Container{
  background-color:white ;

}
.Manage-Container-two{
  background-color:white ;
}


  
 .upload >>>.el-upload-dragger{
  position: absolute;
    left: 32px;
top: 22px;
width: 418px;
height: 448px;
opacity: 1;
border-radius: 10px;
background: rgba(253, 252, 255, 1);
border: 1px dashed rgba(126, 114, 242, 1);
z-index: 1;
}
 .upload {
     position: relative; 
width: 418px;
height: 448px;
z-index: 1;
  }
  .upload-image{
  left: 185px;
  top: 94px;
  width: 50px;
  height: 43.75px;
  opacity: 1;
  position: absolute;
  z-index: 2;
  }

  .Commodiy-box{
     -webkit-appearance: none;
            appearance: none;
     position: absolute;
     border-radius: 10px; 
     height: 40px;
        width:444px;
       font-size: 14px;
         font-family: 'PingFang';
         font-weight: 400;
        border: 1px solid rgba(211, 218, 230, 1);
        z-index: 1;
  }


.Commodiy-box>>>.el-input__inner:hover {
        background: rgb(255, 255, 255);   
     }

.Commodiy-box>>>.el-input__inner {
        background: rgba(247, 249, 252, 1);   
     }
  .Commodiy-box2{
    /* -webkit-appearance: none;
    appearance: none;
    position: absolute; */
    border-radius: 10px; 
    height: 40px;
    width:444px;
    font-size: 14px;
    font-family: 'PingFang';
    font-weight: 400;
    border: 1px solid rgba(211, 218, 230, 1);
  }

  .Commodiy-box2>>>.el-input__inner:hover {
    background: rgb(255, 255, 255);   
  }

  .Commodiy-box2>>>.el-input__inner {
    background: rgba(247, 249, 252, 1);   
  }


  .boxadd{
    display: flex;
    flex-direction: row;
    /* justify-content: space-between; */
    align-items: center;
    height: 50px;
    /* background-color: white; */
  }

  .Commodiy-boxadd{
    border-radius: 10px; 
    height: 40px;
    width:400px;
    font-size: 14px;
    font-family: 'PingFang';
    font-weight: 400;
    border: 1px solid rgba(211, 218, 230, 1);
    margin-right: 20px;
  }

  .Commodiy-boxadd>>>.el-input__inner:hover {
    background: rgb(255, 255, 255);   
  }

  .Commodiy-boxadd>>>.el-input__inner {
    background: rgba(247, 249, 252, 1);   
  }

 .Commodiy-box3{
   -webkit-appearance: none;
            appearance: none;
     border-radius: 10px; 
     height: 40px;
        width:444px;
       font-size: 14px;
         font-family: 'PingFang';
         font-weight: 400;
        border: 1px solid rgba(211, 218, 230, 1);
       z-index: 3;  
       transition: opacity 0.5s ease, visibility 0.5s; 
  }
.Commodiy-box3>>>.el-input__inner {
        background: rgba(247, 249, 252, 1);  
     }

.Commodiy-box3>>>.el-input__inner:hover {
        background: rgb(255, 255, 255);  
     }
  /* .Commodiy-box3>>>.el-input__inner:focus{   
    
  } */
.custom-popover-content{
   border-radius: 10px; 
     height: 200px;
        width:444px;
        position: absolute;
  z-index: 5; /* 设置一个较高的 z-index 值 */
  background: white;
     border: 1px solid rgba(211, 218, 230, 1);
      transition: opacity 0.5s ease, visibility 0.5s; 
}


.popoverspace{
   height: 40px;
}
/* .Commodiy-box3>>>.el-input__inner:focus{
  left: 1012px;
top: 1012px;
width: 444px;
height: 201px;
opacity: 1;
border-radius: 10px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(211, 218, 230, 1);

} */


      .jianjie{
         height: 148px;
      border-radius: 10px;
         width:444px;
          font-size: 14px;
         font-family: 'PingFang';
         font-weight: 200;
          background: rgba(247, 249, 252, 1);
          border: 1px solid rgba(211, 218, 230, 1);
           resize: none;      
           color: rgba(52, 69, 99, 1)
}

.jianjie:focus {
    outline: none; /* 移除默认的焦点样式 */
    box-shadow: none; /* 移除默认的阴影效果 */
    
}
.jianjie:hover {
    outline: none; /* 移除默认的焦点样式 */
    box-shadow: none; /* 移除默认的阴影效果 */
     background: rgb(255, 255, 255);   
}


  .upload>>>.el-upload__text { 
    position: absolute;
  left: 80px;
top: 156px;
width: 264px;
height: 40px;
opacity: 1;
/** 文本1 */
font-size: 14px;
font-weight: 500;
letter-spacing: 0px;
line-height: 19.6px;
color: rgba(167, 180, 204, 1);
text-align: center;
vertical-align: top;
z-index: 2;
  }
.uploadarea{
   position: absolute;
 top: 0px;
 left: 12px;
}
 .Twobtn {
  position: absolute;
 top: 80px;
 left: 12px;
 }
  .el-footer {
position: sticky;
left: 429px;
top: 698px;
width: 1074px;
height: 72px;
opacity: 1;
border-radius: 0 0 10px 10px;
background: rgba(245, 247, 250, 1);
  }

  .LocalUploadBtn {
  position: absolute;
    left: 100px;
    top: 190px;
    width: 206px;
    height: 49px;
    opacity: 1;
    border-radius: 80px;
    background: rgba(126, 114, 242, 1);
    color: white;
    z-index: 2;
  }

  .CloudUploadBtn {
    position: absolute;
    left: 100px;
    top: 250px;
    width: 206px;
    height: 49px;
    opacity: 1;
    border-radius: 80px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(126, 114, 242, 1);
    color: rgba(126, 114, 242, 1);
    z-index: 2;
  }




 .main-content{
  margin-left:30px;
 }

  .searchbtn {
    border-radius: 50px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(211, 218, 230, 1);
    z-index: 2;
  }

  .el-form-item {
     margin-bottom: 20px;
     left: 925px;
color: rgba(52, 69, 99, 1);
    font-family: 'PingFang';
    font-size: 14px;
  }


  .custom-main {
    padding-top: 0px;
    /* 顶部保持一致的间距大小 */
  }
.cancelbutton{
 position: relative;
  left: 778px;
top: 10px;
width: 75px;
height: 40px;
opacity: 1;
border-radius: 5px;
background: rgba(171, 180, 196, 1);
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 1);

}
 



.confirmbutton{
 position: relative;
  left: 798px;
top: 10px;
width: 112px;
height: 40px;
opacity: 1;
border-radius: 5px;
background: rgba(90, 52, 179, 1);
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}




  /* .searchbtn.el-input__inner {
    border-radius: 50px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(211, 218, 230, 1);
    z-index: 2;

    width: 241px;
    height: 38px;
    opacity: 1;
    border-radius: 50px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(211, 218, 230, 1);
  } */

/* .el-select::before {
    content:"▼";    
    padding: 0px 0px;
    position: absolute; right:-03px; top: -01;    
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 10%;      
    pointer-events: none;  
} */



/* .el-select::after {
  content: "▲"; 
  position: absolute;
  right: 8px;  
  top: 50%;

  pointer-events: none;
}
 */
/* 搜索框样式 */
.SearchBrand{
    background: rgba(235, 238, 242, 1);
     margin-left:14px;
     border-radius: 20px;
      width: 402px;
      height: 36px;
      color:white;
}
.SearchBrand >>>.el-input__inner{
  border-radius: 20px;
 width: 402px;
height: 33px;
}

.el-collapse{
   border: none; /* 去除边框 */
  box-shadow: none; /* 去除阴影 */
  background-color: transparent; /* 背景透明 */
}


.popoverspace{
   height: 40px;
}

.move-right {
  padding-left: 16px; /* 或者使用 margin-left: 10px; */
}

.el-popover{
  border-top-style:none;
  box-shadow: none; /* 去除阴影 */
  outline-color:none;
}
.popverofcascader{
  border-radius: 10px; 
     height: 140px;
        width:444px;
}
/* .el-upload>>>.el-upload--picture-card{
  width:58px;
  height: 58px;
  border-radius: 10px;
} */

.upload>>> .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
   margin-top: 24px; 
  margin-left: 35px;
  left: 22px;
  top:10px;
 z-index: 3 ;
}
 
.upload>>> .el-upload-list--picture-card .el-upload-list__item {
  width: 80px !important;
  height: 80px !important;
   margin-top: 24px; 
  margin-left: 16px; 
  left: 22px;
  top:10px;
  z-index: 3 !important;
}

/* .bigimage{
  position: absolute;
  left:50px;
  top:70px;
   width: 180px;
  height: 180px;
  z-index: 5;
} */

.preview-container {
  position: absolute;
  /* left:380px;
  top:70px; */
  z-index: 99;
}
.bigimage {
 width: 180px;
  height: 180px;
   max-width: 200px; /* 设置放大图片的最大宽度 */
  max-height: 200px; /* 设置放大图片的最大高度 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 可选：为预览图片添加阴影 */
   border-radius: 10px;
}

/* .image-count {
  position: absolute;
  top:280px;
  left:88px;
} */

  .image-count {
    position: absolute;
   margin-left: 190px; 
   top:286px; 
    color: rgb(158, 158, 158);
    z-index: 2;
  }

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
/* .image-container {
  position: absolute;
  display: inline-block;
} */

.el-upload-list__item-thumbnail {
  /* display: block; */
  width: 100%;
  height: auto; /* 高度自动适应 */
  aspect-ratio: 1; /* 保持宽高比为1:1 */
  object-fit: cover; /* 确保图片填充容器 */
} 

.top-overlay {
  padding-left: 20%;
  width: 100%;
  height: 33%;
  line-height: 24px;
  /* background-color: rgba(255,255,255,0.2); */
  background-color: rgba(52, 69, 99, 1);
  position: absolute;
  top: 0;
  color: white;
   display: flex; /* 使用 Flexbox 布局 */
  font-size: 12px;
 font-weight: 200;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
   pointer-events: auto;
    z-index: 5; /* 确保比 .top-overlay 的 z-index 更高 */
}

.bottom-overlay {
  bottom: 0;
  width: 100%;
   height: 33%;
   background-color: rgba(52, 69, 99, 1);
  position: absolute;
   display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
   color: white;
  font-size: 16px; /* 设置基准字体大小 */
   pointer-events: auto;
}

.deleteimg {
  width: 1em; /* 设置宽度为3倍的当前字体大小 */
  height: 1em; /* 高度自动调整 */
}

/* 覆盖样式以确保鼠标事件不被遮罩层阻挡 */
.image-container:hover .top-overlay,
.image-container:hover .bottom-overlay {
  pointer-events: auto;
}

.el-upload-dragger .el-upload__text em {
    color: rgba(167,180,204,1);
    font-style: normal;
}




.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
    border-color: rgba(211, 218, 230, 1);
}





/* .no-border-cascader-panel {
  border: none;
} */


.no-border-cascader-panel {
  border: none;
}

.no-border-cascader-panel>>>.el-cascader-node__label {
    flex: 1;
    padding: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* color:black; */
  /* background: rgba(126, 114, 242, 1); */

}

/* , .el-cascader-node:not(.is-disabled):hover  */
.no-border-cascader-panel>>>.el-cascader-node:not(.is-disabled):focus{
   color:white;
   background: rgba(126, 114, 242, 1);
 font-weight: 200;
}

.no-border-cascader-panel>>>.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
    color: white;
     background: rgba(126, 114, 242, 1);
      font-weight: 200;
}

.no-border-cascader-panel>>>.el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
   color: white;
     background: rgba(126, 114, 242, 1);
      font-weight: 200;
}


.no-border-cascader-panel>>>.el-cascader-menu {
    min-width: 200px;
    /* box-sizing: border-box;
    color: #606266;
    border-right: solid 1px #E4E7ED; */
}
</style>